import React from "react";
// 引入antd
import "antd/dist/antd.css";
import { Input, Button, List } from "antd";

// 无状态组件 => 提高性能
const TodoListUi = (props) => {
  return (
    <>
      {/* 输入 */}
      <header style={{ width: 300, margin: 10 }}>
        <Input
          onChange={props.changeInputValue}
          placeholder="请输入要添加的任务"
          value={props.inputValue}
          style={{ width: 225 }}
        />
        <Button
          onClick={props.addTask}
          type="primary"
          style={{ marginLeft: 10 }}
        >
          添加
        </Button>
      </header>
      {/* 列表 */}
      <List
        dataSource={props.list}
        bordered
        style={{ margin: "0 10px", width: "300px" }}
        renderItem={(item, index) => (
          <List.Item
            onClick={() => props.removeTask(index)}
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            {item} <span style={{ color: "red", cursor: "pointer" }}>删除</span>
          </List.Item>
        )}
      />
    </>
  );
};

export default TodoListUi;
